<template>
  <div class="header-m">
    <div class="left" @click="leftClick">
      <slot name="left"></slot>
    </div>
    <div class="con">
      <input class="search"
             :placeholder="placeholder"
             type="text"
             @click="searchClick"
             @keyup.enter="enterClick"
             ref="query"
             v-model="query"
             @blur="blur"
             @focus="focus"/>
      <i class="icon icon-close-solid" v-show="query" @click="clear"></i>
    </div>
    <div class="right" @click="rightClick">
     <i class="icon icon-search"></i>
    </div>
  </div>
</template>

<script>
  import {debounce} from '@/common/js/util'
  export default {
    props: {
      placeholder: {
        type: String,
        default: '输入关键词搜索'
      }
    },
    data() {
      return {
        query: ''
      }
    },
    methods:{
      leftClick() {
        this.$emit('leftClick');
      },
      searchClick() {
        this.$emit('searchClick');
      },
      rightClick() {
        this.$emit('rightClick');
      },
      focus() {
        this.$refs.input.focus();
      },
      clear() {
        this.query = '';
      },
      setQuery(query) {
        this.query = query;
      },
      enterClick() {
        this.$emit('enterClick')
      },
      blur() {
        this.$emit('blur');
      },
      focus(){
        this.$emit('focus');
      }
    },
    created() {
      // 延迟确认输入数据（解决键盘输入会不停的请求）
      this.$watch('query', debounce((newQuery) => {
        this.$emit('query', newQuery)
      }, 200))
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .header-m{
    display: flex;
    position: relative;
    z-index: 11;
    background-color: @color-theme;
    padding: 6px 0;
    .left{
      padding:0 6px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      height: 30px;
      line-height: 30px;
    }
    .con{
      position: relative;
      flex: 1;
      .icon{
        position: absolute;
        right: 8px;
        top: 8px;
        color: @color-text-h;
      }
      .search{
        box-sizing: border-box;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border: none;
        background-color: @color-background-l;
        border-radius: 20px;
        font-size: 14px;
        padding: 0 15px;
      }
      .search::placeholder{
        color: @color-text-l;
      }
    }
    .right{
      width: 45px;
      color: @color-text-w;
      font-size: @font-size-large-l;
      .icon{
        display: inline-block;
        margin-top: 6px;
        margin-left: 12px;
      }
    }
  }
</style>
